<script setup>
import { RouterLink, RouterView } from "vue-router"

import { onMounted, ref } from "vue"
import axios from "axios"
onMounted(() => {
  getData()
})

let datas = ref([])
function getData() {
  axios.get("http://122.112.161.135:3000/program/recommend").then((res) => {
    console.log(res.data.programs) //[...]
    datas.value = res.data.programs
  })
}
</script>

<template>
  <!-- <div class="box"> -->
  <div class="container">
    <header class="header">
      <span style="font-size: 24px">每日推荐</span
      ><span style="font-size: 12px; color: #999; margin-left: 13px"
        >(每日更新)</span
      >
    </header>
    <main>
      <table>
        <tr
          v-for="(data, index) in datas"
          :key="data.id"
          id="table-tr"
          :style="index % 2 == 0 ? '' : 'background-color:#f7f7f7'"
        >
          <td>
            <img
              :src="data.coverUrl"
              style="width: 40px; height: 40px; padding-left: 20px"
            />
          </td>
          <td style="margin: 0 0 0 10px">
            <router-link
              class="test-style"
              style="width: 304px; color: #000000; text-decoration: none"
              :to="'/detail/' + data.id"
              >{{ data.name }}</router-link
            >
          </td>
          <td
            class="test-style"
            style="width: 166px; line-height: 40px; margin: 0 0 0 10px"
          >
            {{ data.radio.name }}
          </td>
          <td style="width: 90px; margin: 0 0 0 10px">
            播放{{ data.listenerCount }}
          </td>
          <td style="width: 126px; margin: 0 0 0 10px">
            赞{{ data.likedCount }}
          </td>
          <td>{{ data.radio.category }}</td>
        </tr>
      </table>
    </main>
  </div>
  <!-- </div> -->
</template>

<style scoped>
/* .box {
  width: 980px;
  background-color: #fff;
  margin: 0 auto;
  padding: 40px 0;
} */
.container {
  width: 900px;
  margin: 0 auto;
}
#table-tr {
  color: #999999;
}
table {
  border: 1px solid #ccc;
}
table {
  width: 100%;
  border-collapse: collapse;
  box-sizing: border-box;
}
table tr td {
  height: 40px;
  padding: 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.header {
  border-bottom: 2px solid #c20c0c;
  height: 42px;
}
.test-style {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
